<template>
	<view class="wrap" @touchmove.stop.prevent="none">
		<swiper :indicator-dots="true" :current="current" @change="onSwiperChange">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<movable-area class="mvba">
					<movable-view class="mvbv1" :x="val.x" :y="val.y" direction="all" :out-of-bounds="true"
						@touchmove.stop.prevent="none" @change="onGoodsMove" :data-index="idx"
						v-for="(val, idx) in item.goods" :key="idx">
						<view class="dot"></view>
						<view class="item" @click="onSkipTap('goodsDetail', val.id)">
							<view class="image">
								<image src="../../static/images/icon-shoppackWhite.png" mode=""></image>
							</view>
							<text class="app_ellipsis">{{val.productName}}</text>
						</view>
					</movable-view>
					<!-- <movable-view class="mvbv2" scale="true" style="background-image: url(http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg);"></movable-view> -->
					<movable-view class="mvbv2" :scale="false"
						:style="{width: `750rpx`, height: `${img_h}rpx`, backgroundImage: `url(${item.img_path})`}">
					</movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
		<text class="tempGoodsTitle">{{tempGoodsTitle}}</text>


		<view class="submitBar">
			<view class="submitBar-L" @click="onSkipTap('goodsListSelect')">
				<image src="../../static/images/icon-shoppack.png"></image>
				<text>添加商品</text>
			</view>
			<view class="submitBar-R">
				<g-btn title="下一步" :customstyle="{width: '200rpx', height: '70rpx'}"
					@click="onSkipTap('hotStyleGoodsPublish')"></g-btn>
			</view>
		</view>
	</view>
</template>

<script>
	let canMoveSetStorageTimer = null
	export default {
		data() {
			return {
				current: 0,
				tempGoodsTitle: '', // 用于计算商品标题实际宽度
				img_path: null,
				img_w: 750,
				img_h: 750,
				addImg: true,
				imgList: [],
			}
		},
		onLoad(options) {
			setTimeout(() => {
				this.getTempTitleWidth()
			}, 4000)
			uni.removeStorageSync('hotStyleImgList')
		},
		onUnload() {
			uni.$off('update-hotstyleEditGoodsList', this.updateGoodsList)
			uni.$off('update-hotstyleAddGoodsList', this.addNewGoods)
			uni.$off('update-hotstyleSwiperIndex', this.changeSwiperIndex)
			uni.removeStorageSync('hotStyleImgList')
		},
		onShow() {
			this.imgList = uni.getStorageSync('hotStyleImgList') || []
			if (this.addImg) {
				this.addImg = false
				uni.chooseImage({
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						this.addNewGoods(res.tempFilePaths)
						// if (tempFilePaths?.length > 0) {
						// 	this.imgList = new Array(tempFilePaths.length).fill('')
						// 	for (let i = 0; i < tempFilePaths.length; i++) {
						// 		uni.getImageInfo({
						// 			src: res.tempFilePaths[i],
						// 			success: (ret) => {
						// 				console.log(ret);
						// 				this.$set(this.imgList, i, {
						// 					img_w: ret.width,
						// 					img_h: ret.height * 750 / ret.width,
						// 					img_path: res.tempFilePaths[i],
						// 					goods: [], // 商品
						// 				})
						// 			}
						// 		})
						// 	}
						// }
					},
					fail: (err) => {
						console.log('err', err);
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		},
		methods: {
			none() {},
			updatePage() {

			},
			changeSwiperIndex(current) {
				this.current = current || 0
			},
			/**
			 * 新增网红爆款商品
			 */
			async addNewGoods(tempFilePaths) {
				try {
					await Promise.all(tempFilePaths.map(item => {
						return new Promise((resolve, reject) => {
							uni.getImageInfo({
								src: item,
								success: (ret) => {
									console.log(ret);
									this.imgList.push({
										img_w: ret.width,
										img_h: ret.height * 750 / ret.width,
										img_path: item,
										goods: [], // 商品
									})
									resolve()
								}
							})
						})
					}))
					uni.setStorageSync('hotStyleImgList', this.imgList)
					this.current = this.imgList.length - 1
				} catch (err) {
					console.log(err);
				}

			},
			/**
			 * 更新图中锚点商品
			 */
			updateGoodsList(goods) {
				if (!this.imgList[this.current]?.goods) return
				this.imgList[this.current].goods.push({
					...goods,
					x: 40,
					y: 40
				})
				uni.setStorageSync('hotStyleImgList', this.imgList)
			},
			onSkipTap(type, params) {
				let urlObj = {
					goodsListSelect: () => {
						uni.$off('update-hotstyleEditGoodsList', this.updateGoodsList)
						uni.$on('update-hotstyleEditGoodsList', this.updateGoodsList)
						uni.navigateTo({
							url: '/pages/commodityManagement/goodsListSelect?pageType=hotStyle'
						})
					},
					goodsDetail: () => {
						uni.navigateTo({
							url: `/pages/shopInfo/goodsDetail?id=${params}`
						})
					},
					hotStyleGoodsPublish: () => {
						uni.$off('update-hotstyleAddGoodsList', this.addNewGoods)
						uni.$on('update-hotstyleAddGoodsList', this.addNewGoods)
						uni.$off('update-hotstyleSwiperIndex', this.changeSwiperIndex)
						uni.$on('update-hotstyleSwiperIndex', this.changeSwiperIndex)
						// 通过缓存把商品列表传送过去，后面如果有需求保存未发布的内容也方便
						uni.setStorageSync('hotStyleImgList', this.imgList)
						uni.navigateTo({
							url: '/pages/commodityManagement/hotStyleGoodsPublish',
						})
					}
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			/**
			 * 获取商品标题实际宽度
			 */
			getTempTitleWidth() {
				const query = uni.createSelectorQuery()
				query.select('.tempGoodsTitle').boundingClientRect(rect => {
					console.log(rect);
				}).exec()
			},
			getSubmitBarNodeInfo() {

			},
			onSwiperChange(e) {
				const {
					current
				} = e.detail
				console.log(current);
				this.current = current
			},
			onGoodsMove(e) {
				const {
					x,
					y,
					source
				} = e.detail
				const {
					index
				} = e.currentTarget.dataset
				if (source === 'touch' && this.imgList[this.current]) {
					let goods = this.imgList[this.current]?.goods[index]
					goods.x = x
					goods.y = y
				}
				clearInterval(canMoveSetStorageTimer)
				const canMoveSetStorageTimer = setTimeout(() => {
					uni.setStorageSync('hotStyleImgList', this.imgList)
				}, 500)
			}
		}
	}
</script>

<style scoped lang="scss">
	swiper {
		width: 750rpx;
		height: 100vh;
	}

	.wrap {
		width: 750rpx;
		overflow: hidden;
	}

	.mvba {
		width: 900rpx;
		height: 750rpx;
		overflow: hidden;
		// height: calc(100vh - 100rpx);
		// background-color: green;
	}

	.mvbv1 {
		display: flex;
		align-items: center;
		width: 300rpx;
		max-width: 450rpx;
		// width: 400rpx;
		// height: 100rpx;
		// background-color: skyblue;
		z-index: 999;

		.dot {
			flex-shrink: 0;
			display: block;
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background-color: #fff;
			box-sizing: content-box;
			border: 8rpx solid rgba(0, 0, 0, .6);
		}

		.item {
			display: flex;
			align-items: center;
			min-height: 40rpx;
			margin-left: 10rpx;
			padding: 0 0 0 10rpx;
			border-radius: 20px 4px 4px 20px;
			background-color: rgba(0, 0, 0, .6);

			.image {
				font-size: 0;

				image {
					width: 18rpx;
					height: 20rpx;
				}
			}

			text {
				max-width: 266rpx;
				padding: 0 12rpx 0 14rpx;
				font-size: 20rpx;
				color: #fff;
			}

			// &::before {
			// 	position: absolute;
			// 	left: 4rpx;
			// 	top: -12rpx;
			// 	z-index: -1;
			// 	content: '';
			// 	border-left: 30rpx solid transparent;
			// 	border-top: 20rpx solid transparent;
			// 	border-right: 30rpx solid rgba(0, 0, 0, .6);
			// 	border-bottom: 20rpx solid transparent;

			// 	// background-color: rgba(0,0,0,.6);
			// }
		}
	}

	.mvbv2 {
		background-size: 100% 100%;
		// background-color: red;
		z-index: 99;
	}

	.submitBar {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100vw;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.submitBar-L {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		image {
			width: 34rpx;
			height: 36rpx;
		}

		text {
			font-size: 20rpx;
			color: #666;
		}
	}

	.submitBar-R {}
</style>
